
<template>
    <div class="div">
        <global-tables
            :total="total"
            :list="list"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
            @changePage="handleChangePage"
            @handleAllSelect="handleAllSelect"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div></div>
                    <div class="table-top-wrap-bottom">
                        <div></div>
                        <Select v-model="search.ShopID" style="width:170px" placeholder="请选择门店">
                            <Option v-for="item in shopList" :value="item.ID" :key="item.ID">{{ item.ShopName }}</Option>
                        </Select>
                        <DatePicker type="date" placeholder="请选择开始时间" style="width:150px;margin-left:10px;" v-model="search.st"></DatePicker>
                        <DatePicker type="date" placeholder="请选择结束时间" style="width:150px;margin:0 10px;" v-model="search.et"></DatePicker>
                        <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.onum" placeholder="请输入标题名称/入库单号" style="width:200px" />
                        <i-input style="display:none"></i-input>
                        <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                    </div>
                </div>
            </Form>
        </global-tables>
    </div>
</template>

<script>
/**
 * 全局参数列表
 */
import { cyclicRouting } from '@/util';
import { getModulePermission } from '@/api/user';
import { getTablesList, postSubmitForm, shopData } from './service';
import GlobalTables from '@/components/GlobalTables';
export default {
    name: 'FinanceInboundpro',
    components: {
        GlobalTables
    },
    data() {
        return {
            isModal: false,
            loading: true,
            total: 0,
            ModalTitle: '修改全局参数',
            isEdit: false,
            allSelectArr: null,
            shopList: [],
            search: {
                onum: '',
                pageindex: 1,
                pagesize: 10,
                st: '',
                et: '',
                ShopID: 0
            },
            itemId: null,
            formValidate: this.initFormValidate(),
            ruleValidate: this.initRuleValidate(),
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '标题',
                    key: 'Title'
                },
                {
                    title: '入库单号',
                    key: 'IDONum'
                },
                {
                    title: '供货商',
                    key: 'SupplierName'
                },
                {
                    title: '入库类别',
                    width: 150,
                    render: (h, params) => {
                        const { OrderType } = params.row;
                        if (OrderType == 1) {
                            return h('div', [h('p', {}), '统采入库']);
                        } else if (OrderType == 2) {
                            return h('div', [h('p', {}), '差异补货']);
                        } else if (OrderType == 3) {
                            return h('div', [h('p', {}), '调拨入库']);
                        } else if (OrderType == 4) {
                            return h('div', [h('p', {}), '调拨退货']);
                        } else if (OrderType == 5) {
                            return h('div', [h('p', {}), '外购入库']);
                        } else if (OrderType == 6) {
                            return h('div', [h('p', {}), '纠错入库']);
                        }
                    }
                },
                {
                    title: '状态',
                    width: 100,
                    render: (h, params) => {
                        const { OrderState } = params.row;
                        if (OrderState == 0) {
                            return h('div', [h('p', {}), '待入库']);
                        } else if (OrderState == 1) {
                            return h('div', [h('p', {}), '已入库']);
                        } else if (OrderState == 2) {
                            return h('div', [h('p', {}), '已作废']);
                        }
                    }
                },
                {
                    title: '入库人',
                    key: 'RealName',
                    width: 100
                },
                {
                    title: '创建时间',
                    width: 115,
                    render: (h, params) => {
                        return h('div', [
                            params.row.CreateTime &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    params.row.CreateTime.substring(0, 10)
                                )
                        ]);
                    }
                },

                {
                    title: '操作',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(params.row, 'detail');
                                        }
                                    }
                                },
                                '明细'
                            )
                        ]);
                    }
                }
            ],
            list: []
        };
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
            /* 按钮权限请求 */
            getModulePermission({
                roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                moduleid: id
            }).then(res => {
                /* 按钮权限赋值 */
                for (let item in res.data) {
                    if (res.data[item].name == 'edit') {
                        this.isEdit = true;
                    }
                }
                /* 列表请求 */
                this.getTablesListData();
            });
        });
        shopData({
            pageindex: '',
            pagesize: ''
        }).then(res => {
            this.shopList = res.data.rows;
            this.shopList.unshift({
                ID: 0,
                ShopName: '全部'
            });
        });
    },
    methods: {
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            getTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 表格清空 */
        handleEmpty() {
            this.search.onum = '';
            this.getTablesListData();
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        },
        /* 对话框提交 */
        handleSubmit(name) {
            const { formValidate } = this;
            this.$refs[name].validate(valid => {
                if (valid) {
                    let data = [
                        {
                            ID: this.itemId,
                            Param: formValidate.Param,
                            Remark: formValidate.Remark
                        }
                    ];
                    postSubmitForm(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.loading = true;
                            this.handleClose();
                            this.formValidate = this.initFormValidate();
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 对话框操作点击 */
        handleBtnClick(item, type) {
            if (type == 'detail') {
                this.$router.push({
                    path: `/finance-inboundpro-detail/${item.ID}/${item.OrderType}/${item.OrderState}`
                });
            }
        },
        /* 表单数据 */
        initFormValidate() {
            return {
                Param: '',
                Remark: ''
            };
        },
        /* 表单校验 */
        initRuleValidate() {
            return {
                Param: [{ required: true, message: '请输入参数数字', trigger: 'change' /*pattern: '验证数字：^[0-9]*$'*/ }],
                Remark: [{ required: true, message: '请输入描述内容', trigger: 'change' }]
            };
        }
    }
};
</script>

<style lang="less" scoped>
// .form-item-width {
//     width: 300px;
// }
// .btn-wrap {
//     margin: 0 15px;
// }
// .dle-btn {
//     margin: 0 10px;
// }
// .search-con {
//     padding: 10px 0;
//     .search {
//         &-col {
//             display: inline-block;
//             width: 200px;
//         }
//         &-input {
//             display: inline-block;
//             width: 200px;
//             margin-left: 2px;
//         }
//         &-btn {
//             margin-left: 2px;
//         }
//     }
// }
</style>
<style scoped>
/* .div >>> .table-top-wrap {
    padding-bottom: 0px;
}
.form >>> .ivu-input-wrapper {
    width: 165%;
}
.form >>> .ivu-input {
    min-height: 100px;
} */
</style>






